<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<% 

String basePath = request.getScheme() + "://" + request.getServerName()
		+ ":" + request.getServerPort() + request.getContextPath()
		+ "/";

request.setAttribute("basePath", basePath);
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片上传测试</title>
<style type="text/css">
.row{
	height: 100px;
	width:auto;
	border-bottom-style:solid; 
	border-bottom-width:1px; 
	border-bottom-color:#000;
}

.row .leftcls{
	float:left;
	width:150px;
	height:100%;
	border-right-style:solid; 
	border-right-width:1px; 
	border-right-color:#000;
	/* background-color:#aaa; */
}

.row .rightcls{
	float:left;
	width:auto;
	height:100%;
}

.header{
	height: 50px;
	width:auto;
	background-color:#aaa;
}

._box 
{ 
position: relative; 
width: 119px; 
height: 37px; 
background-color: #53AD3F; 
background-repeat: no-repeat; 
background-position: 0 0; 
background-attachment: scroll; 
line-height: 37px; 
text-align: center; 
color: white; 
cursor: pointer; 
overflow: hidden; 
z-index: 1; 
} 
.choicefile_hide 
{ 
position: absolute; 
width: 119px; 
height: 40px; 
line-height: 40px; 
font-size: 23px; 
opacity: 0; 
filter: "alpha(opacity=0)"; 
filter: alpha(opacity=0); 
-moz-opacity: 0; 
left: -5px; 
top: -2px; 
cursor: pointer; 
z-index: 2; 
} 
</style>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$(".choicefile_hide").on("change", function(){
		var file = $(this)[0].files[0];
		var filename = file.name;
		var filesize = file.size;
		
		//构造表单
		var formdata = new FormData();
		formdata.append('file', file);
		$.ajax({
			url:"${basePath}images/upload.action",
			type:"post",
			data:formdata,
			processData: false,
			contentType: false,
			success:function(result){
				$(".fileserverpath").html('<a href="${basePath}'+result+'" target="_blank">'+result+'</a>');
				$(".filename").html(filename); 
			},
			error:function(){
				alert("上传失败，请刷新页面后重试");
			}
		});
	});
	
	$(".uploadfile").on("click", function(){
		$(".hide_form").submit();
	});
});
</script>
</head>
<body>
<div class="header">文件上传示例</div>
<div class="row">
	<div class="leftcls">普通表单上传文件demo</div>
	<div class="rightcls">
	<form action="${basePath}images/upload.action" method= "post" enctype ="multipart/form-data">
		<input id="image" name="image" type="file">
		<input type="submit" value="提交">
	</form>
	</div>
</div>

<div class="row">
	<div class="leftcls">ajax上传文件demo</div>
	<div class="rightcls">
		<div>文件：<span class="filename"></span></div>
		<div class="_box">
			<form class="hide_form" enctype ="multipart/form-data">
			<input class="choicefile_hide" type="file">
			<div class="choicefile">选择文件</div>
			</form>
		</div>
		<div>文件服务器路径：<span class="fileserverpath"></span></div>
	</div>
</div>

</body>
</html>